<template>
  <div>
    <table :class="$style.table">
      <thead>
        <tr :class="$style.caption">
          <th colspan="6">
            <img
              :class="$style.logo"
              src="@/assets/images/logos/logo.png"
              alt="CUPSHE_LOGO"
            />
            <span>南京卡佩西工艺说明书</span>
          </th>
        </tr>
      </thead>

      <tbody :class="$style.tbody">
        <tr>
          <td :class="$style.title" colspan="6">基础信息</td>
        </tr>
        <tr>
          <td :class="$style.label">CP 号：</td>
          <td :class="$style.value">
            {{ basicInfo.cpNo }}
          </td>

          <td :class="$style.label">SKC：</td>
          <td :class="$style.value">
            {{ basicInfo.skcNo }}
          </td>

          <td :class="$style.label">品类：</td>
          <td :class="$style.value">
            {{ basicInfo.sort }}
          </td>
        </tr>

        <tr>
          <td :class="$style.label">设计师：</td>
          <td :class="$style.value">
            {{ basicInfo.designer }}
          </td>

          <td :class="$style.label">制版师：</td>
          <td :class="$style.value">
            {{ basicInfo.printor }}
          </td>

          <td :class="$style.label">工艺员：</td>
          <td :class="$style.value">
            {{ basicInfo.craftor }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    productId: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      basicInfo: {}
    }
  },
  mounted() {
    this.getBasicInfo()
  },
  methods: {
    async getBasicInfo() {
      try {
        const res = await this.$api.craft.craftHead({
          productId: this.productId
        })

        this.basicInfo = res
        this.$emit('init', res.id)
      } catch (e) {
        console.error(e)
      }
    }
  }
}
</script>

<style lang="less" module>
@import './style';

.table {
  margin-top: 0;
}

.caption {
  background-color: #c6d9f1;
  width: 100%;
  text-align: center;
  font-size: 18px;

  th {
    position: relative;
    height: 68px;
    width: 100%;
    line-height: 68px;
  }

  .logo {
    position: absolute;
    left: 10px;
    top: 5px;
  }
}

.tbody {
  .label {
    width: 5%;
  }
  .value {
    width: 20%;
  }
}
</style>
